<template>
  <view class="qq">
    <view class="sousuo">
      <uni-search-bar radius="100" placeholder="搜索商品" clearButton="auto" cancelButton="none" />
    </view>
    <view  class="zz">
      <view class="dd">
        <!-- 顶部导航栏 -->
        <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
          <view>
            <view
              class="scroll-view-item_H"
              v-for="(tab, index) in tabBars"
              :key="tab.id"
              :id="tab.id"
              :class="navIndex == index ? 'activite' : ''"
              @tap="checkIndex(index)"
            >
              {{ tab.name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="content">
        <!-- 内容 -->
        <swiper :current="navIndex" @change="tabChange" class="content1">
          <swiper-item class="swiper_item">
            <unpaid :xx="xx" />
          </swiper-item>
          <swiper-item class="swiper_item">
            <unpaid :xx="xx" />
          </swiper-item>
          <swiper-item class="swiper_item">
            <unpaid :xx="xx" />
          </swiper-item>
        </swiper>
      </view>
    </view>
	
  </view>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import { http } from '/until/request.js'; // 确保路径正确
 import {
 		useTokenStore
 	} from '../../../store/token'; //导入pinia对象
	const usetoken = useTokenStore()
	
const navIndex = ref(0);

const tabBars = ref([
  { name: '全部订单', id: 'all' },
  { name: '未发货', id: 'preparing' },
  { name: '已发货', id: 'not_received' },
]);

 
const uid = ref(0);
const status = ref('');
const orders = ref([]);
const xx=ref({})
 
// 全部订单
const fetchOrders = async () => {
  const response = await http({
    url: '/orders/selectorder2',
    method: 'post',
    data: {
      status: status.value,
      uid: uid.value,
    },
  });
  if (response.data) {
  
    orders.value = response.data;
	xx.value.uid=uid.value
	xx.value.orders=orders.value
	console.log(xx.value)
  }
};
 
onMounted(() => {
	if(usetoken.token != undefined){
		uid.value = usetoken.token.uid;
	}
  console.log(uid.value)
  // status.value = 0; // 初始状态设置为'all'或其他合适的值
  fetchOrders();
});
 
function checkIndex(index) {
  console.log(index);
  status.value =  index; // 根据需要设置status的值
  fetchOrders();
  navIndex.value = index;
}
 
function scroll(e) {
  console.log(e.detail.scrollTop);
}
 
function tabChange(e) {
  navIndex.value = e.detail.current;
  // 可以添加逻辑来根据current设置status.value，如果需要的话
}


</script>

<style lang="scss">
	.qq{
		
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.sousuo{
		
		height: 10%;
	}
	.zz{
	
		height: 90%;
		display: flex;
		flex-direction: column;
	}
	.dd{
		
		height: 10%;
	}
	.activite {
		color: #55aaff;
	}
	
	.content {
		// border: 1px solid red;
		width: 100%;
		height: 100%;
		
		color: #000000;
		.content1{
			width: 100%;
			height: 100%;
		}
	}
	
	.swiper_item{
		// border: 1px solid saddlebrown;
		height: 100%;
		overflow-y: auto
	}
	
	.scroll-view_H {

		white-space: nowrap;
		width: 140%;
		color: #CCCCCC;
	}

	.scroll-view-item_H {
		
		display: inline-block;
		width: 25%;
		height: 75rpx;
		line-height: 50rpx;
		text-align: center;
		padding: 10px 0;
		font-size: 32rpx;
	}

	.order-container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.order-id {
		font-weight: bold;
	}
	
</style>